<!--首页搜索-->
<template>
	<slider-tem>
		<div class="content" :class="{ 'res-content': resData.length !== 0 }">
			<router-link to="/">
				<img src="../assets/logo.jpg" alt="logo">
			</router-link>
			<!-- 搜索框 -->
			<search-input @returnQuery="returnQuery"></search-input>
		</div>
		<div class="res">
			<div v-if="resData.length !== 0">
				<query-res></query-res>
			</div>
		</div>
	</slider-tem>
</template>

<script>
import sliderTem from '../components/sliderTem'
import searchInput from '@/components/search'
import queryRes from './res-data/index'
import { bus } from '../assets/utitls/bus'
export default {
	components: {
		sliderTem,
		searchInput,
		queryRes
	},
	data() {
		return {
			Judge: false,
		}
	},
	computed: {
		resData() {
			return this.$store.state.resData
		},
	},
	methods: {
		returnQuery(data) {
			this.msg = data
		},
	}
}
</script>

<style lang="less" scoped>
.content {
	margin: 0 auto;
	padding-top: 200px;
	width: 650px;
	> a{
		.size(108px, 99px);
		display: block;
		margin: 0 auto;
	}
}

// 查询结果动画
.res-content {
	transition: all .3s;
	padding-top: 0;
	width: 1000px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	> a {
		.size(52px, 52px);
		margin: 0;
		> img {
			.size(100%, 100%);
		}
	}

	/deep/ .search-box {
		width: 600px;
		margin-top: 0;
	}
}

.res {
	width: 1000px;
	margin: 20px auto 0;
}
</style>
